<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <style>
    body,
    ol,
    ul,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    th,
    td,
    dl,
    dd,
    form,
    fieldset,
    legend,
    input,
    textarea,
    select {
      margin: 0;
      padding: 0
    }

    body {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background: #fff;
      -webkit-text-size-adjust: 100%;
    }

    a {
      color: #2d374b;
      text-decoration: none
    }

    a:hover {
      color: #cd0200;
      text-decoration: underline
    }

    em {
      font-style: normal
    }

    li {
      list-style: none
    }

    img {
      border: 0;
      vertical-align: middle
    }

    table {
      border-collapse: collapse;
      border-spacing: 0
    }

    p {
      word-wrap: break-word
    }
  </style>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: rgba(0, 0, 0, 0);
      width: 437px;
      height: 682px;
      max-height: 682px;
      min-height: 682px;
      min-width: 437px;
      max-width: 437px;
      background-image: url('./images/圆角矩形1.png') ;
      background-repeat:no-repeat;
    }

    #left_box {
      

      /* display: inline-block; */
      
      display: none;
      /* background-color: #2e333d; */
      
      /* border-radius: 6px; */
      /* box-shadow: -4px 6px 20px 4px #b7b7b7; */
    }

     nav {
      -webkit-app-region: drag;
      height: 60px;

      width: 437px;
    }

     nav ul {
      float: right;
      margin-top: 12px;
      margin-right: 18px;
    }

     nav ul li:first-child {
      width: 20px;
      height: 20px;
      background-color: #1bd1a1;
      border-radius: 10px;
      cursor: pointer;
      display: inline-block;
      -webkit-app-region: no-drag;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

     nav ul li:last-child {
      width: 20px;
      height: 20px;
      background-color: #ff6b6b;
      border-radius: 10px;
      margin-left: 13px;
      cursor: pointer;
      display: inline-block;
      -webkit-app-region: no-drag;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

     nav img {
      margin-top: 12px;
      margin-left: 13px;
      cursor: pointer;
      -webkit-app-region: no-drag;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .logo_CN {
      margin: 0 auto;
      width: 200px;
      margin-left: 141px;
      margin-top: 124px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .logo_EN {
      margin-top: 11px;
      width: 200px;
      margin-left: 140px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

    }

    .logo_CN img {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .logo_EN img {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    #ocr_button {
      width: 287px;
      height: 70px;
      background-image: url('./images/矩形1.png');
      background-size: 100% 100%;
      margin-top: 159px;
      margin-left: 75px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      transition: all 0.3s;
    }

    #aocr_button {
      width: 287px;
      height: 70px;
      background-image: url('./images/矩形1拷贝.png');
      background-size: 100% 100%;
      margin-top: 35px;
      margin-left: 75px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      transition: all 0.3s;
    }

    #ocr_button img {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
    }

    #aocr_button img {

      cursor: pointer;
    }

    #information {
      width: 42px;
      height: 42px;

      background-image: url('./images/icons8_Info.png');
      background-size: 100% 100%;
      float: right;
      margin-top: 108px;
      margin-right: 15px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }



    #settings:hover {
      animation: settingsRotate 0.4s;
    }

    @keyframes settingsRotate {

      100% {
        transform: rotate(180deg);
      }
    }

    #aocr_button:hover {
      margin-left: 60px;
    }

    #ocr_button:hover {
      margin-left: 60px;
    }

    body {
      -webkit-animation: fadeInDown 1s .2s ease both;
      -moz-animation: fadeInDown 1s .2s ease both;
    }

    @-webkit-keyframes fadeInDown {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-20px)
      }
      100% {
        opacity: 1;
        -webkit-transform: translateY(0)
      }
    }

    @-moz-keyframes fadeInDown {
      0% {
        opacity: 0;
        -moz-transform: translateY(-20px)
      }
      100% {
        opacity: 1;
        -moz-transform: translateY(0)
      }
    }
    #information_d{
      position: absolute;
    width: 365px;
    height: 500px;
    top: -544px;
    left: -364px;
    background-color: #2296f3;
    border-radius: 5px;
    display: none;
    transition: all 0.3s;
    padding: 20px 20px;
    color: #Fff;
    font-size: 16px;
    
}
    #information:hover #information_d{

      display: block;
    }
    
    #right_box {
      display: inline-block;
    }
  </style>
</head>

<body>
  <main>
    <article id="left_box">
      <nav>
        <img id="settings" src="./images/icons8_Settings.png" alt="设置" width="35" height="35" />
        <ul>
          <li id="min"></li>
          <li id="close"></li>
        </ul>
      </nav>
      <header>
        <div class="logo_CN">
          <img src="./images/逆.png" alt="逆" width="58" height="56">
          <img src="./images/水.png" alt="水" width="42" height="42" style="margin-top: 12px;">
          <img src="./images/寒.png" alt="寒" width="42" height="44" style="margin-top: 12px;">
        </div>
        <div class="logo_EN">
          <img src="./images/Answer.png" alt="Answer" width="150" height="33">
        </div>

      </header>
      <div id="ocr_button" data-clipScreen='clipBtn'>
        <img src="./images/icons8_General_OCR.png" data-clipScreen='clipBtn' alt="OCR" width="51" height="51" style="    margin: 7px 22px 8px 11px;">
        <img src="./images/手动截图模式.png" data-clipScreen='clipBtn' alt="手动截图模式" width="156" height="22">
      </div>
      <!-- <div id="aocr_button">

        <img src="./images/icons8_OCR_3.png" alt="AOCR" width="52" height="52" style="    margin: 6px 22px 7px 11px;">
        <img src="./images/自动截图模式.png" alt="自动截图模式" width="155" height="22">

      </div> -->
      <footer>
        <div id="information">
          <div id="information_d">
            <p class="information_text">1.手动截图快捷键 CTRL + 1</p>
            <p class="information_text">2.手动截图后会复制到剪贴板中</p>


          </div>
        </div>
      </footer>
    </article>
    <aside id="right_box">
      <nav>
        <img  src="./images/icons8_Back.png" alt="设置"      height="29"style="margin-top: 20px;
        margin-left: 20px;"/>
        <ul>
          <li id="min"></li>
          <li id="close"></li>
        </ul>
      </nav>
      
    </aside>
  </main>

  <!-- <h1>Hello Worlda!</h1>
      We are using node <script>document.write(process.versions.node)</script>,
      Chrome <script>document.write(process.versions.chrome)</script>,
      and Electron <script>document.write(process.versions.electron)</script>. -->
  <script>
     var screen = require('./screen/renderProcess');  // 引入文件
    var ipc = require('electron').ipcRenderer;

    document.getElementById('min').addEventListener('click', () => {

      ipc.send('window-min');

    })
    document.getElementById('close').addEventListener('click', () => {

      ipc.send('window-close');

    })
  </script>

</body>

</html>